<template>
  <div class="live" @click="toLive">
    <div class="cover">
      <img class="img" v-lazy="cover+coverSize" />
      <div class="count">
        <span>{{ roomType }}</span>
        <span>{{ online | formatNumber }}人气</span>
      </div>
      <div class="title">{{ title }}</div>
      <div class="status">{{ status }}</div>
    </div>
  </div>
</template>

<script>
import { formatNumber } from '@/filters/filters.js'
export default {
  name: 'PostLive',
  props: {
    // 直播间id
    roomid: {
      type: Number
    },
    // 直播类型
    roomType: {
      type: String
    },
    // 直播类型id
    roomTypeId: {
      type: Number
    },
    // 人气
    online: {
      type: Number
    },
    // 直播状态
    liveStatus: {
      type: Number
    },
    // 直播时间
    liveTime: {
      type: String
    },
    // 标题
    title: {
      type: String
    },
    // 封面图
    cover: {
      type: String
    },
    coverSize: {
      type: String,
      default: '@702w_394h'
    }
  },
  computed: {
    status () {
      return this.liveStatus > 0 ? (this.liveStatus === 2 ? '轮播中' : '直播中') : '直播结束'
    }
  },
  filters: {
    formatNumber
  },
  methods: {
    toLive () {}
  }
}
</script>

<style lang="scss" scoped>
  .live{
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
    margin-bottom: rem(10px);
    .cover{
      @include cover(702, 394, rem(4px));
      .count {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: rem(56px);
        padding: {
          left: rem(10px);
          bottom: rem(10px);
        }
        box-sizing: border-box;
        font-size: rem(12px);
        color: $color-white;
        background-image: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 100%);
        span{
          margin-right: rem(10px);
        }
      }
    }
    .title{
      position: absolute;
      left: rem(10px);
      top: rem(10px);
      width: rem(254px);
      color: $color-white;
      font-size: rem(14px);
      @include max-lines(2);
    }
    .status{
      position: absolute;
      right: rem(10px);
      top: rem(10px);
      padding: 0 rem(6px);
      color: $color-white;
      font-size: rem(12px);
      background-color: rgba(0,0,0,0.5);
    }
  }
</style>
